<template>
  <input v-model="color" v-focus.stop="1" />

  <div class="box" v-color='color'></div>
</template>
  
<!-- 组合式api -->
<script setup>
  import { ref } from "vue";
  const color = ref("");
  // 在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。
  const vFocus = {
    mounted: (el, binding, vnode, prevVnode) => {
      console.log(el, binding, vnode, prevVnode);
      el.focus();
    },
  };
</script>

<!-- 选项式api -->
<!-- <script>
  export default {
    setup() {},
    directives: {
      // 在模板中启用 v-focus
      focus: {
        mounted: (el) => el.focus(),
      },
    },
  };
</script> -->

<style scoped>
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
  }
</style>